<template>
  <Modal v-model:visible="showModal" title="邮政快递" width="2200px">
    <div class="flex flex-col">
      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadData"
        ></a-select>

        <a-radio-group
          class="ml-3"
          v-model:value="tableState.selectedTag"
          name="radioGroup"
          @change="handleChange"
        >
          <a-radio value="全部">
            <span style="color: white">全部</span>
          </a-radio>
          <a-radio value="快递业务">
            <span style="color: white">快递业务</span>
          </a-radio>
          <a-radio value="邮政业务">
            <span style="color: white">邮政业务</span>
          </a-radio>
        </a-radio-group>
      </div>
      <vxe-table
        :key="tableKey"
        :loading="true"
        v-bind="customTableStyle"
        :data="tableData"
        class="custom-vxe-table"
      >
        <vxe-column field="year" title="年份" width="80">
          <template #default="{ row }"> {{ row.year }}年 </template>
        </vxe-column>
        <vxe-column field="month" title="月份" width="80" :sortable="true">
          <template #default="{ row }"> {{ row.month }}月 </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="withCity"
          title="同城(万件)"
          width="80"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.withCity || 0 }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="withCityTb"
          title="同城同比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.withCityTb ? row.withCityTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="withCityHb"
          title="同城环比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.withCityHb ? row.withCityHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="remoteLocation"
          title="异地(万件)"
          minWidth="80"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.remoteLocation || 0 }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="remoteLocationTb"
          title="异地同比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.remoteLocationTb ? row.remoteLocationTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="remoteLocationHb"
          title="异地环比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.remoteLocationHb ? row.remoteLocationHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="internationalHk"
          title="国际港澳台(万件)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.internationalHk || 0 }}
          </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="letters"
          title="普邮函件(万件)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.letters || 0 }}
          </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="lettersTb"
          title="普邮函件同比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.lettersTb ? row.lettersTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="lettersHb"
          title="普邮函件环比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.lettersHb ? row.lettersHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>

        <!--        <vxe-column v-if="['全部', '快递业务'].includes(tableState.selectedTag)" field="kdTotalIncome" title="快递总收入"-->
        <!--          minWidth="100" :sortable="true">-->
        <!--          <template #default="{ row }">-->
        <!--            {{ row.kdTotalIncome || 0 }} 元-->
        <!--          </template>-->
        <!--        </vxe-column>-->
        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="packageNum"
          title="普邮包裹(万件)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.packageNum || 0 }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="packageNumTb"
          title="包裹同比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.packageNumTb ? row.packageNumTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="packageNumHb"
          title="包裹环比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.packageNumHb ? row.packageNumHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="orderSalesNewspaper"
          title="订销报纸(万份)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.orderSalesNewspaper || 0 }}
          </template>
        </vxe-column>
        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="orderSalesMagazine"
          title="订销杂志(万份)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.orderSalesMagazine || 0 }}
          </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '快递业务'].includes(tableState.selectedTag)"
          field="kdTotalIncome"
          title="快递业务总收入(亿元)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.kdTotalIncome || 0 }}
          </template>
        </vxe-column>

        <vxe-column
          v-if="['全部', '邮政业务'].includes(tableState.selectedTag)"
          field="yzTotalIncome"
          title="邮政业务总收入(亿元)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.yzTotalIncome || 0 }}
          </template>
        </vxe-column>

        <vxe-column field="allTotalIncome" title="总收入(亿元)" minWidth="100" :sortable="true">
          <template #default="{ row }">
            {{ row.allTotalIncome || 0 }}
          </template>
        </vxe-column>
        <!--        <vxe-column v-if="['全部', '邮政业务'].includes(tableState.selectedTag)" field="yzTotalIncome" title="邮政总收入"-->
        <!--          minWidth="100" :sortable="true">-->
        <!--          <template #default="{ row }">-->
        <!--            {{ row.yzTotalIncome || 0 }} 元-->
        <!--          </template>-->
        <!--        </vxe-column>-->
      </vxe-table>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'
import Big from 'big.js'

const isLoading = ref(false)

const showModal = ref(false)

const tableKey = ref(0)

const searchParams = ref({
  year: '',
})
const tableData = ref<any[]>([])

const tableState = reactive({
  selectedTag: '全部',
})

// 统一管理表格样式
const customTableStyle = {
  ...utils.customTableStyle,
  footerMethod: ({ columns, data }) => {
    const footerData = [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }

        if (
          [
            'withCity',
            'remoteLocation',
            'internationalHk',
            'letters',
            'packageNum',
            'orderSalesNewspaper',
            'orderSalesMagazine',
          ].includes(column.field)
        ) {
          return (utils.sumNum(data, column.field) || '') + '万件'
        }

        if (['kdTotalIncome', 'yzTotalIncome', 'allTotalIncome'].includes(column.field)) {
          return (utils.sumNum(data, column.field) || '') + '亿元'
        }

        return ''
      }),
    ]
    return footerData
  },
}

function handleChange(tag: string, checked: boolean) {
  tableKey.value++
  if (checked) {
    tableState.selectedTag.push(tag)
  } else {
    tableState.selectedTag = tableState.selectedTag.filter((t) => t !== tag)
  }
}

function loadData() {
  isLoading.value = true
  Apis.szbt.postData
    .get_list({
      params: {
        year: searchParams.value.year,
        pageNum: 1,
        pageSize: 20,
      },
    })
    .then((res) => {
      tableData.value = (res.rows || [])
        .filter((item) => item.year == searchParams.value.year)
        .sort((a: any, b: any) => {
          // 先按年份倒序
          if (b.month !== a.month) {
            return a.month - b.month
          }
        })
        .map((item: any, index: number) => {
          item.index = index + 1
          item.withCity = new Big(item.withCity).toNumber()
          item.remoteLocation = new Big(item.remoteLocation).toNumber()
          item.internationalHk = new Big(item.internationalHk).toNumber()
          item.letters = new Big(item.letters).toNumber()
          item.packageNum = new Big(item.packageNum).toNumber()
          item.orderSalesNewspaper = new Big(item.orderSalesNewspaper).toNumber()
          item.orderSalesMagazine = new Big(item.orderSalesMagazine).toNumber()
          item.yzTotalIncome = new Big(item.yzTotalIncome).toNumber()
          item.kdTotalIncome = new Big(item.kdTotalIncome).toNumber()
          item.allTotalIncome = new Big(item.yzTotalIncome).plus(item.kdTotalIncome).toNumber()
          return item
        })

      // const totalPassengerCount = tableData.value.reduce((sum, item) => sum + (item.passengerVolume || 0), 0);
      // tableData.value = tableData.value.map(item => {
      //   const passengerCount = item.passengerVolume || 0;
      //   item.passengerCountPercentage = totalPassengerCount ? ((passengerCount / totalPassengerCount) * 100).toFixed(2) : 0;
      //   return item;
      // });
    })
    .catch((err) => {
      message.error('获取数据失败')
    })
    .finally(() => {
      isLoading.value = false
    })
}

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadData()
  },
})
</script>

<style lang="scss" src="@/styles/custom-vxe-table.scss"></style>
